<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        打印一个梯形
    </div>
    <div>
        封装一个函数，他的作用是，用户输入一个行数，梯形显示多少行
    </div>
    <input type="text" id="num">
    <button id="btn">提交</button>
    <div id="res">

    </div>
    <script>
        // var str = '' ;
        // var str1 = '--' ;
        // var str2 = '**' ;
        // for ( var i = 1 ; i <= 5 ; i += 2 ) {
        //     for ( var j = i ; j <= 5 ; j += 2 ) {
        //         str = str + str1 ; 
        //     }
        //     for (var k = 1 ; k <= i ; k += 2 ) {
        //         str = str + "*" + str2 + "*" ; 
        //     }
        //     str = str + "</br>" ;
        // } 
        // document.write(str);
        function trapeZoid (a) {
            var str = '' ;
            for ( var i = 1 ; i <= ( a * 2 - 1 ) ; i += 2 ) {
                for ( var j = i ; j <= ( a * 2 - 1 ) ; j += 2 ) {
                    str = str + "--" ; 
                }
                for ( var k = 1 ; k <= i ; k ++ ) {
                    str = str  + '**' ; 
                }
                str = str + '</br>' ;
            }
            return  str ;
        }
        var num = document.getElementById("num");
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var a = parseInt( num.value );
            console.log(a);
            document.getElementById("res").innerHTML = trapeZoid (a) ;
        }
    </script>
</body>
</html>